<template>
  <div class="singer">
    <!-- 歌曲筛选  加了个div包起来了,方便你收起来-->
    <div>
      <div class="song-area">
        <span
          v-for="item in this.tags.area"
          :key="item.id"
          :class="item.id == area ? 'active' : ''"
          @click="choosearea(item.id)"
          >{{ item.name }}</span
        >
      </div>
      <div class="song-sex">
        <span
          v-for="item in this.tags.sex"
          :key="item.id"
          :class="item.id == sex ? 'active' : ''"
          @click="choosesex(item.id)"
          >{{ item.name }}</span
        >
      </div>
      <div class="song-genre">
        <span
          v-for="item in this.tags.genre"
          :key="item.id"
          :class="item.id == genre ? 'active' : ''"
          @click="choosegenre(item.id)"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <!-- 歌手列表 -->
    <div class="singerList">
      <div
        class="singer-item"
        v-for="item in singerList"
        :key="item.singer_id"
        @click="getSongMsg(item.singer_mid, item.singer_pic)"
      >
        <div class="singer-img">
          <img :src="item.singer_pic" alt="" />
        </div>
        <div class="singer-content">
          <div class="singer-name">{{ item.singer_name }}</div>
          <div class="singer-fans">粉丝xxxx</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    // 地区
    area: -100,
    // 性别
    sex: -100,
    // 列表(侧面首字母排序)
    index: -100,
    // 歌曲风格
    genre: -100,
    // tags
    tags: [],
    // 歌手总数
    total: '',
    // 歌手列表
    singerList: []
  }),
  created() {
    this.getSingerList()
    this.getSingers()
  },
  methods: {
    // 获取歌曲列表
    async getSingerList() {
      const res = await this.$http.getSingerList({
        area: this.area,
        sex: this.sex,
        index: this.index,
        genre: this.genre
      })
      const data = res.data.data
      this.tags = data
    },
    async getSingers() {
      const res = await this.$http.getSingers({
        area: this.area,
        sex: this.sex,
        index: this.index,
        genre: this.genre
      })
      const data = res.data.data
      console.log(res.data.data)
      // 歌手列表
      this.singerList = data.list
    },
    // 选择歌曲种类
    choosearea(id) {
      this.area = id
      this.getSingerList()
      this.getSingers()
    },
    choosesex(id) {
      this.sex = id
      this.getSingerList()
      this.getSingers()
    },
    choosegenre(id) {
      this.genre = id
      this.getSingerList()
      this.getSingers()
    },
    // 获取歌手信息
    getSongMsg(id, pic) {
      this.$router.push({ path: '/home/singerhotsong', query: { id, pic } })
    }
  }
}
</script>
<style lang="less" scoped>
// 歌曲筛选
.singer {
  padding: 0px 20px;
  .song-area,
  .song-sex,
  .song-genre {
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    margin-bottom: 10px;
    .active {
      background-color: green;
      color: white;
    }
    span {
      display: inline-block;
      width: 50px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background-color: white;
      border-radius: 30px;
      margin: 0px 5px;
    }
  }
}
// 歌手列表
.singerList {
  .singer-item {
    display: flex;
    .singer-img {
      width: 50px;
      height: 50px;
      margin-bottom: 15px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .singer-content {
      margin-left: 15px;
      flex: 1;
      .singer-fans {
        margin-top: 10px;
        font-size: 12px;
        color: #666;
      }
    }
  }
}
</style>
